<template>
  <!-- 热门内容 -->
  <div class="home-hot-box">
    <!-- 顶上导航 -->
    <van-cell title="热门推荐"
      icon="/static/home/Hot/fire.png"
      is-link
      title-style="text-align:left"
      value="全部榜单" />
    <!-- 景点列表 -->
    <div class="box-main">
        <a href="#" class="hot-item"
          v-for="item in dataList"
          :key="item.id"
        >
            <div class="img">
                <span></span>
                <img :src="item.img" alt="">
            </div>
            <h5 class="van-ellipsis">{{ item.name}}</h5>
            <div class="line-price">
                <span class="price">${{ item.price }}</span>起
            </div>
        </a>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: []
    }
  },
  created () {
    this.dataList = [
      { id: 1, img: '/static/home/Hot/h1.jpg', name: '景点名称', price: 66 },
      { id: 2, img: '/static/home/Hot/h2.jpeg', name: '景点名称景点名称景点名称', price: 66 },
      { id: 3, img: '/static/home/Hot/h3.jpeg', name: '景点名称', price: 66 },
      { id: 4, img: '/static/home/Hot/h4.jpeg', name: '景点名称景点名称', price: 66 },
      { id: 5, img: '/static/home/Hot/h5.jpg', name: '景点名称', price: 66 },
      { id: 6, img: '/static/home/Hot/h6.jpg', name: '景点名称', price: 66 },
      { id: 7, img: '/static/home/Hot/h7.jpg', name: '景点名称', price: 66 },
      { id: 8, img: '/static/home/Hot/h8.jpg', name: '景点名称', price: 66 },
      { id: 9, img: '/static/home/Hot/h9.jpg', name: '景点名称', price: 66 },
      { id: 10, img: '/static/home/Hot/h10.jpg', name: '景点名称景点名称', price: 66 },
      { id: 11, img: '/static/home/Hot/h11.jpg', name: '景点名称', price: 66 },
      { id: 12, img: '/static/home/Hot/h12.jpg', name: '景点名称', price: 66 },
      { id: 13, img: '/static/home/Hot/h13.jpg', name: '景点名称景点名称', price: 66 },
      { id: 14, img: '/static/home/Hot/h14.jpg', name: '景点名称', price: 66 }]
  }
}
</script>

<style lang="less">
.home-hot-box {
    padding: 0 10px;
    .van-cell {
      padding: 10px 0;
    }
// //   width: 800px;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
  .box-main{
    width: 100%;
    display: flex;
    padding-top: 10px;
    overflow-x: scroll;
    .hot-item {
      display: flex;
      flex-direction: column;
      width: 100px;
      margin-right: 100px;
      padding-bottom: 10px;

      .img {
        position: relative;

        span {
            position: absolute;
            left: -2px;
            top: -2px;
            display: inline-block;
            width: 42px;
            height: 20px;
            z-index: 10;
        }

        img {
            width: 100px;
            height: 100px;
        }
      }
      h5 {
        color: #212;
        padding: 2px 0;
        font-size: 12px;
        margin: 0;
      }

      .line-price {
          color: #212;
          font-size: 12px;
          .price {
              color: #f40;
              font-size: 13px;
          }
      }
      &:nth-child(1) .img span {
        background: url(/static/home/Hot/top1.png) no-repeat;
        background-size: 100% auto;
      }
      &:nth-child(2) .img span {
        background: url(/static/home/Hot/top2.png) no-repeat;
        background-size: 100% auto;
      }
      &:nth-child(3) .img span {
        background: url(/static/home/Hot/top3.png) no-repeat;
        background-size: 100% auto;
      }
    }
  }
}
</style>
